<template>
  <div>
     <el-table
    :ref="gridRef"
    :data="GridData"
    :stripe="stripe"
    :border="border"
    :height="height"
    :max-height="MaxHeight"
    :highlight-current-row="isHighLightCurrRow"
    :default-sort="DefaultSort"
    :show-summary="isShowSummary"
    :span-method="ArraySpanMethod"
    :default-expand-all="isDefaultExpandAll"
    @current-change="ClickGridCurrentRow"
    @selection-change="SelectGridRow">
  <el-table-column
      type="index"
      width="60"
      label="序号"
      :fixed="isFixedIndex"
      v-if="isShowIndex">
      </el-table-column>
    <el-table-column
      type="selection"
      width="50"
      :fixed="isFixedChecbox"
      v-if="isShowChecbox">
    </el-table-column>
    <el-table-column
     v-for="item in GridColumnData" :key="item.guid"
      :prop="item.code"
      :label="item.title"
      :width="item.colwidth"
      :fixed="item.fixed"
      :sortable="item.sortable"
      v-if="item.isVisiable"
      >
    </el-table-column>
  </el-table>
  </div>
</template>

<script>

export default {
  name: 'vueGrid',
   props: {
    gridRef: { //自定义列表ref
      type: String,
      default () {
        return "vueGrid"
      }
    },
    GridData:{
      type: Array,
      required: true,
      default: function() {
        return [];
      }
    },
    GridColumnData:{
      type: Array,
      required: true,
      default: function() {
        return [];
      }
    },
    stripe:{ //stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。
      type:Boolean,
      default:function(){
        return true;
      }
    },
    border:{ //表格边框。它接受一个Boolean，默认为false，设置为true即为启用。 
      type:Boolean,
      default:function(){
        return true;
      }
    },
    height:{ //表格高度
      type:Number,
      default:function(){
        return null;
      }
    },
    MaxHeight:{ //表格流体高度（最大高度） 
      type:Number,
      default:function(){
        return 500;
      }
    },
    isHighLightCurrRow:{ //配置highlight-current-row属性即可实现单选。
      type:Boolean,
      default:function(){
        return false;
      }
    },
    isShowIndex:{//是否显示序号列 fixed
      type:Boolean,
      default:function(){
        return true;
      }
    },
    isShowChecbox:{//是否显示复选框
      type:Boolean,
      default:function(){
        return true;
      }
    },
    isFixedIndex:{//是否固定序号列 
      type:Boolean,
      default:function(){
        return true;
      }
    },
    isFixedChecbox:{//是否固定复选框  
      type:Boolean,
      default:function(){
        return true;
      }
    },
    DefaultSort:{//默认某一列排序
      type: Object,
      default () {
        return {prop: 'index', order: 'ascending'} //降序descending 升序ascending
      }
    }, 
     isShowSummary:{//是否显示合计行 
      type:Boolean,
      default:function(){
        return false;
      }
    },
     isDefaultExpandAll:{//是否展开所有行 
      type:Boolean,
      default:function(){
        return false;
      }
    },
     which: {
      type: [String, Number],
      default() {
        return 1;
      },
    },
  },
  data () {
    return {
      
    }
  },
  components: {
   
  },
  created() {
  },
  mounted() {
  },
  methods:{
    ClickGridCurrentRow:function(val) { //当表格的当前行发生变化的时候会触发该事件(单选)
      this.$emit("GridCurrentRowCallback",val)
      },
    SelectGridRow:function(val) { // 当选择项发生变化时会触发该事件（点击复选框触发事件，多选）
      this.$emit("GridRowCallback",val)
      },
    ArraySpanMethod:function({ row, column, rowIndex, columnIndex }){ //合并行与列
      this.$emit("GridArraySpanCallback",{ row, column, rowIndex, columnIndex })
    }
  }
}
</script>

<style scoped>

</style>
